<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">后台管理系统</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="用户名">
                        <template #prepend>
                            <el-button :icon="User"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="param.password"
                        @keyup.enter="submitForm(login)">
                        <template #prepend>
                            <el-button :icon="Lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="captcha" class="captcha-form-item">
                    <div class="captcha-input-wrapper">
                        <el-input v-model="param.captcha" placeholder="验证码" class="captcha-input"></el-input>
                        <img :src="captchaUrl" alt="验证码" class="captcha-img" @click="refreshCaptcha"/>
                    </div>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm(login)">登录</el-button>
                </div>

                <el-checkbox v-model="rememberMe" label="记住密码" size="large" />
                <div class="login-form">
                    <li @click="writeForm()">忘记密码</li>
                    <li @click="createForm()">注册用户</li>
                </div>
            </el-form>
        </div>
    </div>
</template>



<script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { useRouter } from 'vue-router';
    import { ElMessage } from 'element-plus';
    import type { FormInstance, FormRules } from 'element-plus';
    import { Lock, User } from '@element-plus/icons-vue';
    import axios from 'axios';
    
    interface LoginInfo {
        username: string;
        password: string;
        captcha: string; 
    }
    
    const checked = ref(false); // 记住密码状态
    const router = useRouter();
    const param = reactive<LoginInfo>({
        username: '',
        password: '',
        captcha: '', // 初始化验证码字段
    });
    const rememberMe = ref(false); // 记住密码
    const captchaUrl = ref('http://127.0.0.1:8000/info/generate_captcha/'); // 验证码图片的 URL
    
    const rules: FormRules = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: false, message: '请输入验证码', trigger: 'blur' }], // 验证码验证规则
    };
    
    const login = ref<FormInstance>();
    const createForm = () => {
        router.push('/createLogin');
    }
    const writeForm = () => {
        router.push('/writeLogin');
    }
    const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return;
        formEl.validate((valid: boolean) => {
            if (valid) {
                console.log(param)
                axios.post('http://127.0.0.1:8000/api/login/', {
                    ...param,
                    remember_me: rememberMe.value
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage.success('登录成功');
                        localStorage.setItem('ms_username', param.username);
                        localStorage.setItem('ms_permiss', ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']);
                        router.push('/');
                        if (rememberMe.value) {
                            localStorage.setItem('login-param', JSON.stringify(param));
                        } else {
                            localStorage.removeItem('login-param');
                        }
                    } else {
                        ElMessage.error('登录失败');
                    }
                }).catch(() => {
                    ElMessage.error('登录请求失败');
                });
            }
        });
    };
    
    // 刷新验证码
    const refreshCaptcha = () => {
        captchaUrl.value = `http://127.0.0.1:5000/captcha`;
    };
</script>
<style scoped>
    .login-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-bg.jpg);
        background-size: cover;
    }

    .ms-title {
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #333;
        font-weight: bold;
        padding-top: 10px;
    }

    .ms-login {
        width: 350px;
        border-radius: 5px;
        background: #fff;
    }

    .ms-content {
        padding: 10px 30px 30px;
    }

    .login-btn {
        text-align: center;
    }

    .login-form {
        display: flex;
        justify-content: space-around;
        font-size: 12px;
    }

    .login-form li {
        cursor: pointer;
        list-style: none;
    }

    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #333;
    }

    .login-form li:hover {
        color: #6CA6E3;
        border-bottom: 1px solid #6CA6E3;
    }

    .captcha-form-item {
        padding: 0; /* Remove padding to align items correctly */
    }

    .captcha-input-wrapper {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .captcha-input {
        flex: 1;
        margin-right: 10px; /* Space between input and image */
    }

    .captcha-img {
        height: 40px;
        width: 80px;
        cursor: pointer;
    }
</style>
